<template>
  <view class="messageCenter u-skeleton">
    <view style="width: 690rpx; margin: auto">
      <view
        v-if="messageList.length"
        class="flex-items flex-sp-between fs26 topTitBox"
      >
        <view> 未读消息 <text :style="{color: '#ff5000'}">{{ num }}</text> 条 </view>
        <view v-if="num != 0" class="allRead" @click="allMessage">
          全部已读
        </view>
      </view>
      <u-skeleton
        el-color="#efefef"
        bg-color="#ffffff"
        :loading="loading && isFirstComeIn"
        :animation="true"
      ></u-skeleton>
      <u-swipe-action
        class="u-swipe-action"
        :show="item.show"
        :index="index"
        v-for="(item, index) in messageList"
        :key="item.noticeId"
        @click="productClick(item)"
        :options="options"
      >
        <view
          class="messageItem"
           @click="goToMesDetail(item, item.noticeId, item.only, item.jump)"
        >
          <view class="messageBox">
            <view class="messageType">
              <view v-if="item.noticeType == 1" class="messageTypeL">
                <view
                  class="iconBox u-skeleton-circle"
                  :style="{ backgroundImage: `url(${VUE_APP_STATIC_URL}ui-static/zwx-static/user/notice1.png)` }"
                >
                  <!-- <image :src="`${VUE_APP_STATIC_URL}ui-static/images/notice.png`" alt=""></image> -->
                  <view class="redBox" v-if="item.ifRead === 0"></view>
                </view>
                <text class="u-skeleton-rect">订单消息</text>
              </view>
              <view v-else class="messageTypeL">
                <view class="iconBox u-skeleton-circle">
                  <image
                    :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/user/notice2.png`"
                    alt=""
                  ></image>
                </view>
                <text class="u-skeleton-rect">系统公告</text>
              </view>
              <view class="messageTypeR u-skeleton-rect">{{
                item.createTime
              }}</view>
            </view>
            <view class="message-box">
              <view v-if="!item.htmlData">
                <view class="messageInfo u-skeleton-rect"></view>
                <view class="messageInfo u-skeleton-rect"></view>
              </view>
              <rich-text
                v-else
                class="messageInfo"
                :nodes="item.htmlData"
              ></rich-text>
            </view>
          </view>
          <view class="messageBtn">
            <span class="viewDetail">查看详情</span>
            <u-icon name="arrow-right" color="#3B3B3B" size="28"></u-icon>
          </view>
        </view>
      </u-swipe-action>
      <slide-loading />
      <view class="reachBottom" v-if="noMore && topLeft > 400">
        <image
          class="reach-icon"
          :src="`${VUE_APP_STATIC_URL}ui-static/img/reachBottom.png`"
          mode="widthFix"
        ></image>
        <text class="reach-text">这里到底了哦~~</text>
      </view>
    </view>
    <view v-if="ifEmpty" class="empty-box">
      <image
        class="question-empty"
        :src="`${VUE_APP_STATIC_URL}ui-static/img/bgnull.png`"
      ></image>
      <view class="tohome-box flex-items-plus">暂无消息</view>
    </view>
    <!-- 回到顶部 -->
    <ReturnTop :returnTopFlag="returnTopFlag" />
  </view>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { request } from "@/utils/request";
import API from "@/config/api";
import { onPageScroll, onReachBottom } from "@dcloudio/uni-app";
import { VUE_APP_STATIC_URL } from "@/config/api";

const list = ref(3);
const messageList = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]); // 消息列表
const page = ref(1);
const pageSize = ref(20);
const loadingType = ref(0);
const loading = ref(false);
const isFirstComeIn = ref(true);
const returnTopFlag = ref(false); // 返回顶部显示隐藏
const topLeft = ref(0); // 无更多数据显示距离
const noMore = ref(false); // 没有更多数据显示隐藏
const num = ref(0); // 未读消息总数
const options = ref([
  {
    text: "删除",
    style: {
      backgroundColor: "#ff5000",
    },
  },
]);
const ifEmpty = ref(false);

onBeforeMount(() => {
  page.value = 1;
  messageList.value = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
  getAllMessage();
  GetUser();
});

onReachBottom(() => {
  if (!ifEmpty.value && noMore.value) {
    uni.stopPullDownRefresh();
  } else {
    page.value = page.value + 1;
    getAllMessage();
  }
});
/**
 * 获取未读消息总数
 * @returns {Promise<void>}
 * @constructor
 */
const GetUser = async () => {
  try {
    const res = await request(API.GetUser, {}, "GET");
    num.value = res.data.notRead;
  } catch (err) {}
};
/**
 * 格式化文本
 * @param html
 */
/* const parseText = (html) => {
  parse(html, (err, htmlData) => {
    return htmlData
  })
} */
/**
 * 格式化富文本方法
 * @param html
 * @returns {*}
 */
const formatRichText = (html) => {
  let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
    match = match.replace(/style="[^"]+"/gi, "").replace(/style='[^']+'/gi, "");
    match = match.replace(/width="[^"]+"/gi, "").replace(/width='[^']+'/gi, "");
    match = match
      .replace(/height="[^"]+"/gi, "")
      .replace(/height='[^']+'/gi, "");
    return match;
  });
  newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
    match = match
      .replace(/width:[^;]+;/gi, "max-width:100%;")
      .replace(/width:[^;]+;/gi, "max-width:100%;");
    return match;
  });
  newContent = newContent.replace(/<br[^>]*\/>/gi, "");
  newContent = newContent.replace(
    /\<img/gi,
    '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
  );
  return newContent;
};
/**
 * 获取消息列表数据
 * @returns {Promise<void>}
 */
const getAllMessage = async () => {
  loading.value = true;
  try {
    const res = await request(
      API.getMessage,
      {
        page: page.value,
        pageSize: pageSize.value,
      },
      "GET"
    );
    uni.hideLoading();
    if (res.data.length == 0) {
      loadingType.value = 1;
    } else {
      let _messageList = messageList.value
        .concat(res.data.list)
        .filter((item) => JSON.stringify(item) !== "{}");
      messageList.value = _messageList.map((item) => {
        let newContent = item.noticeContent.replace(
          /<img[^>]*>/gi,
          function (match, capture) {
            match = match
              .replace(/style="[^"]+"/gi, "")
              .replace(/style='[^']+'/gi, "");
            match = match
              .replace(/width="[^"]+"/gi, "")
              .replace(/width='[^']+'/gi, "");
            match = match
              .replace(/height="[^"]+"/gi, "")
              .replace(/height='[^']+'/gi, "");
            return match;
          }
        );
        newContent = newContent.replace(
          /style="[^"]+"/gi,
          function (match, capture) {
            match = match
              .replace(/width:[^;]+;/gi, "max-width:100%;")
              .replace(/width:[^;]+;/gi, "max-width:100%;");
            return match;
          }
        );
        newContent = newContent.replace(/<br[^>]*\/>/gi, "");
        newContent = newContent.replace(
          /\<img/gi,
          '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
        );
        // return newContent;
        /* parse(newContent, (err, htmlData) => {
          item.htmlData = htmlData
        }) */
        item.htmlData = newContent;
        return item;
      });
      if (messageList.value.length === 0) {
        ifEmpty.value = true;
      }
      if (messageList.value.length >= res.data.total) {
        noMore.value = true;
      }
    }
  } catch (err) {
    uni.hideLoading();
    uni.showToast({
      title: "失败",
      icon: "none",
    });
  } finally {
    loading.value = false;
    isFirstComeIn.value = false;
  }
};

/**
 * 删除消息删除消息
 * @param item 当前选择数据
 * @returns {Promise<void>}
 */
const productClick = async (item) => {
  try {
    const res = await request(
      API.delMessage,
      {
        noticeId: item.noticeId,
      },
      "post"
    );
    uni.hideLoading();
    if (res.code == 200) {
      page.value = 1;
      messageList.value = [];
      getAllMessage();
      GetUser();
    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "none",
      });
    }
  } catch (err) {}
};
/**
 * 点击读取全部消息
 * @returns {Promise<void>}
 */
const allMessage = async () => {
  try {
    const res = await request(API.allMessage, {}, "post");
    if (res.code == 200) {
      uni.showToast({
        title: "全部已读",
        icon: "none",
      });
      page.value = 1;
      messageList.value = [];
      getAllMessage();
      GetUser();
    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "none",
      });
    }
  } catch (err) {}
};
/**
 * 跳转消息详情
 * @param noticeId 通知消息id
 * @param only 订单ID
 * @param jump 2 为订单跳转订单详情
 * @returns {Promise<void>}
 */
const goToMesDetail = async (item, noticeId, only, jump) => {
  try {
    const res = await request(
      API.readNotice,
      {
        noticeId: noticeId,
      },
      "post"
    );
    if (res.code == 200) {
      item.ifRead = 1;
      if (jump == 2) {
        uni.navigateTo({
          url:
            "/zwx_category_page1/orderModule/orderDetails?orderId=" +
            only +
            "&noticeId=" +
            noticeId,
        });
      } else {
        uni.navigateTo({
          url:
            "/zwx_category_page2/userModule/messageDetail?noticeId=" + noticeId,
        });
      }
    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "none",
      });
    }
  } catch (err) {}
};
onPageScroll((e) => {
  returnTopFlag.value = e.scrollTop > 600;
  topLeft.value = e.scrollTop;
});
</script>

<style lang="scss" scoped>
.messageCenter {
  height: 100%;
  width: 100%;
  background: #F5F3F1;

  .topTitBox {
    height: 100rpx;
    padding: 0 20rpx;
    background: #f7f7f7;
    position: relative;
    z-index: 9999;
    .allRead {
      width: 144rpx;
      height: 56rpx;
      line-height: 56rpx;
      text-align: center;
      color: #333333;
      background: #ffffff;
    }
  }
  .empty-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 50%;
    .tohome-box {
      color: #999999;
      margin-top: 50rpx;
    }
    .question-empty {
      width: 113rpx;
      height: 98rpx;
    }
  }
  ::v-deep .u-swipe-action {
    margin-bottom: 20upx !important;
    background: none !important;
  }
  .messageItem {
    width: 691rpx;
    background: #ffffff;
    border-bottom: 2rpx solid #f8f8f8;
    border-radius: 12rpx;
    .messageBox {
      .messageType {
        padding: 30upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text {
          min-width: 130rpx;
          min-height: 46rpx;
        }
        .iconBox {
          border-radius: 50%;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          width: 60rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20upx;
          position: relative;
          .redBox {
            width: 20upx;
            height: 20upx;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            right: 0upx;
            top: 0upx;
          }
        }
        .messageTypeL {
          display: flex;
          align-items: center;
          image {
            width: 50upx;
            height: 50upx;
            border-radius: 50%;
          }
          span {
            font-size: 32upx;
            color: #333333;
          }
        }
        .messageTypeR {
          color: #cccccc;
          font-size: 24upx;
          min-width: 220rpx;
          min-height: 34rpx;
        }
      }
      .message-box {
        width: 100%;
        padding: 0 32rpx 20rpx 32rpx;
      }
      .messageInfo {
        min-height: 40rpx;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 设置显示的行数 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        margin-bottom: 10rpx;
        img {
          width: 100%;
          margin-bottom: 25upx;
        }
        p {
          padding: 0 40upx;
          color: #999999;
          font-size: 28upx;
        }
      }
    }
    .messageBtn {
      margin-top: 20upx;
      border-top: 1upx solid #eeeeee;
      height: 88upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 40upx;
      .viewDetail {
        color: #333333;
        font-size: 28upx;
      }
    }
  }
}
</style>
